<!-- 文件列表网格布局 license by http://eleadmin.com -->
<template>
  <div class="ele-file-list">
    <!-- 头部全选框 -->
    <div v-if="checkbox" class="ele-file-list-header">
      <div class="ele-file-list-check-group" @click.stop="checkAllChange">
        <i :class="checkboxClass"></i>
        <div v-if="total">
          {{ totalText.replace(/{total}/g, String(total)) }}
        </div>
        <div v-else>{{ checkAllText }}</div>
      </div>
    </div>
    <!-- item -->
    <ele-file-grid-item
      v-for="(item, index) in data"
      :key="index"
      :item="item"
      :icons="icons"
      :checkbox="checkbox"
      :selection="selection"
      @item-click="itemClick"
      @item-check-change="itemCheckChange"
    />
  </div>
</template>

<script>
  import EleFileGridItem from './ele-file-grid-item.vue';

  export default {
    name: 'EleFileGrid',
    components: { EleFileGridItem },
    emits: ['check-all-change', 'item-click', 'item-check-change'],
    props: {
      // 文件数据
      data: {
        type: Array,
        required: true
      },
      // 后缀对应的图标
      icons: {
        type: Array,
        required: true
      },
      // 选中数据
      selection: Array,
      // 是否显示复选框
      checkbox: Boolean,
      // 是否是全选
      checked: Boolean,
      // 是否是半选
      indeterminate: Boolean,
      // 选中的数量
      total: Number,
      // 选中数量文字
      totalText: {
        type: String,
        required: true
      },
      // 全选按钮文字
      checkAllText: String
    },
    computed: {
      // 头部复选框class
      checkboxClass() {
        return [
          'ele-file-list-check ele-file-icon-check ele-bg-primary',
          { checked: this.checked }
        ];
      }
    },
    methods: {
      /* 全选框点击事件 */
      checkAllChange() {
        this.$emit('check-all-change');
      },
      /* item点击事件 */
      itemClick(item) {
        this.$emit('item-click', item);
      },
      /* item复选框点击事件 */
      itemCheckChange(item) {
        this.$emit('item-check-change', item);
      }
    }
  };
</script>

<style lang="scss">
  // 文件列表网格布局
  .ele-file-list {
    box-sizing: border-box;
    position: relative;

    // header
    .ele-file-list-header {
      padding: 0 16px;
      margin-bottom: 8px;
      border-bottom: 1px solid hsla(0, 0%, 60%, 0.15);
      box-sizing: border-box;
      line-height: 36px;
      display: flex;

      // 全选框
      .ele-file-list-check-group {
        display: inline-flex;
        align-items: center;
        cursor: pointer;

        .ele-file-list-check {
          width: 16px;
          height: 16px;
          border-radius: 2px;
          margin-right: 13px;

          &:before {
            top: 4px;
            left: 3px;
            width: 8px;
            height: 4px;
          }

          &:not(.checked) {
            background-color: transparent !important;
            border: 1px solid hsla(0, 0%, 60%, 0.3);

            &:before {
              display: none;
            }
          }
        }
      }
    }
  }
</style>
